<template>
    <div class="page">
        <nav-top style="position:sticky; top: 0; left: 0;right: 0;"></nav-top>
        <div class="ball1"></div>
        <div class="ball2"></div>
        <div class="ball3"></div>
        <div class="ball4"></div>
        <div class="ball5"></div>
        <div class="ball6"></div>
        <div class="ball7"></div>
        <div class="bg1"></div>
        <div class="bg2"></div>
        <div class="bg3"></div>
        <div class="bg4"></div>

        <div class="main">
            <div class="tabs">
                <div class="tab">
                    <router-link v-for="item in list" :key="item.name" :to="item.route">
                        <span :data-font="$i18n.locale">{{ $i18n.locale == 'en' ? item.enName : item.name }}</span>
                    </router-link>
                </div>
            </div>
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
import navTop from "@/components/common/nav-top"
export default {
    name: 'userInfo',
    components: {
        navTop
    },
    data() {
        return {
            list: [
                {
                    name: '个人中心',
                    enName: 'Personal Center',
                    route: '/userInfo/myInfo'
                },
                {
                    name: '我的报名',
                    enName: 'My Registrations',
                    route: '/userInfo/myRegistrations'
                }
            ]
        }
    }
}
</script>

<style lang="less" scoped>
.page {
    width: 51.2rem;
    min-height: 100vh;
    position: relative;

    .ball1 {
        pointer-events: none;
        width: 0.69rem;
        height: 0.69rem;
        background: url('@/assets/img/balls2_1.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 6.03rem;
        top: 9.04rem;
    }

    .ball2 {
        pointer-events: none;
        width: 0.45rem;
        height: 0.45rem;
        background: url('@/assets/img/balls1_3.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 4.16rem;
        top: 14.93rem;
    }

    .ball3 {
        pointer-events: none;
        width: 1.39rem;
        height: 1.39rem;
        background: url('@/assets/img/balls1_1.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 6.91rem;
        top: 3.28rem;
    }

    .ball4 {
        pointer-events: none;
        width: 0.83rem;
        height: 0.83rem;
        background: url('@/assets/img/balls1_2.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 6.13rem;
        top: 5.52rem;
    }

    .ball5 {
        pointer-events: none;
        width: 2.08rem;
        height: 2.11rem;
        background: url('@/assets/img/balls3.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 3.07rem;
        bottom: 8rem;
    }

    .ball6 {
        pointer-events: none;
        width: 1.25rem;
        height: 1.28rem;
        background: url('@/assets/img/balls5.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 5.68rem;
        bottom: 6.19rem;
    }

    .ball7 {
        pointer-events: none;
        width: 0.93rem;
        height: 0.96rem;
        background: url('@/assets/img/balls4.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 4.13rem;
        bottom: 4.11rem;
    }

    .bg1 {
        pointer-events: none;
        width: 6.13rem;
        height: 5.23rem;
        background: url('@/assets/img/competitionJudges/bg1.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 0;
        top: 0;
    }

    .bg2 {
        pointer-events: none;
        width: 11.25rem;
        height: 7.97rem;
        background: url('@/assets/img/competitionJudges/bg2.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 0;
        bottom: 0;
    }

    .bg3 {
        pointer-events: none;
        width: 10.35rem;
        height: 10.35rem;
        background: url('@/assets/img/competitionJudges/bg3.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 14.8rem;
        bottom: 2.03rem;
    }

    .bg4 {
        pointer-events: none;
        width: 12.13rem;
        height: 6.24rem;
        background: url('@/assets/img/competitionJudges/bg4.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 4.37rem;
        bottom: 0rem;
    }
}

.main {
    width: 100%;

    .tabs {
        margin: 0.59rem auto;
        width: 34.99rem;
        padding-left: 1.49rem;
        display: flex;
        align-items: center;

        .tab {
            position: relative;

            a {
                margin-left: 1.28rem;
                position: relative;
                display: inline-block;
                height: 100%;

                span {
                    font-size: 1.17rem;
                    font-family: 'AlibabaPuHuiTi-Regular', 'AlibabaPuHuiTi';
                    font-weight: 400;
                    color: #C5C5CA;
                    line-height: 1.92rem;
                }
            }

            a:nth-of-type(1) {
                margin-left: 0;
            }

            .router-link-active {
                span {
                    font-size: 1.17rem;
                    font-family: 'AlibabaPuHuiTi-Bold', 'AlibabaPuHuiTi';
                    font-weight: bold;
                    color: #212121;
                    line-height: 1.92rem;
                }
            }

            .router-link-active::after {
                content: "";
                width: 100%;
                height: 0.05rem;
                background: #7709CC;
                position: absolute;
                top: 2.08rem;
                left: 0;
            }
        }

        .tab::before {
            content: '';
            position: absolute;
            top: 2.13rem;
            left: 0;
            width: 100%;
            height: 0.03rem;
            background: #C5C5CA;
        }
    }


}
</style>